<template>
	<div class="bar-control">
		<el-collapse class="control-collapse" v-model="activeName" accordion v-if="app">
			<el-collapse-item :title="activeName ? 'Close Controls' : 'Open Controls'" name="1">
				<el-form class="control-form" :label-position="labelPosition" label-width="100" :model="app">
					<el-form-item label="rotate">
						<el-slider
							v-model="app.config.rotate"
							:min="app.configParameters.rotate.min"
							:max="app.configParameters.rotate.max"
							@change="handleChangeForForm"
						/>
					</el-form-item>
					<el-form-item label="align">
						<el-select v-model="app.config.align" @change="handleChangeForForm">
							<el-option v-for="(item, index) in Object.keys(app.configParameters.align.options)" :key="index" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item label="verticalAlign">
						<el-select v-model="app.config.verticalAlign" @change="handleChangeForForm">
							<el-option v-for="(item, index) in Object.keys(app.configParameters.verticalAlign.options)" :key="index" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item label="position">
						<el-select v-model="app.config.position" @change="handleChangeForForm">
							<el-option v-for="(item, index) in Object.keys(app.configParameters.position.options)" :key="index" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item label="distance">
						<el-slider
							v-model="app.config.distance"
							:min="app.configParameters.distance.min"
							:max="app.configParameters.distance.max"
							@change="handleChangeForForm"
						/>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup lang="ts" name="echartControl">
import { ref } from 'vue';
import type { FormItemProps, FormProps } from 'element-plus';

const props = defineProps(['app']);

const activeName = ref(1);
const labelPosition = ref<FormProps['labelPosition']>('right');
const itemLabelPosition = ref<FormItemProps['labelPosition']>('');

const emit = defineEmits(['change']);
const handleChangeForForm = (val: string) => {
	// console.log("form-item val:", val)
	emit('change', props.app);
};
</script>

<style scoped lang="scss">
::v-deep .el-collapse-item__header,
::v-deep .el-collapse-item__wrap {
	background-color: transparent !important;
	color: #fff !important;
	border-bottom: none;
}
::v-deep .el-collapse-item__header {
	height: 30px;
}
::v-deep .el-collapse-item__content {
	padding-bottom: 0;
}
::v-deep .el-form-item__label {
	color: #fff !important;
}
.bar-control {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 10px;
	.control-collapse {
		width: 100%;
		padding: 10px;
		border-bottom: none;
		.control-form {
			width: 100%;
			padding: 10px;
		}
	}
}
</style>